<template>
  <div>
    <el-tooltip class="show-panel-btn" effect="dark" :content="showIcon.text" placement="left">
      <el-button :disabled="showButtonDisabled" style="float: right;" circle type="primary" :icon="showIcon.icon" @click="showPanel=!showPanel" />
    </el-tooltip>
    <div v-show="showPanel">
      <el-card class="card-panel-max" style="height: 100vh;overflow: scroll;">
        <div slot="header">
          <span>热门榜首</span>
        </div>
        <div>
          查前几
          <el-input-number v-model="rankQuery.pageSize" controls-position="right" size="mini" :min="1" label="查前几?" @change="handleChange" />
        </div>
        <el-divider content-position="left">榜单</el-divider>
        <div class="block">
          <div v-for="(item,i) in rankData" :key="i" v-loading="loading">
            <el-card class="card-margin-top rank-card" style="cursor: pointer">
              <div class="rank-icon">
                <svg-icon v-if="i===0" icon-class="champion" class-name="card-panel-icon" />
                <svg-icon v-else-if="i===1" icon-class="runnerup" class-name="card-panel-icon" />
                <svg-icon v-else-if="i===2" icon-class="thirdplace" class-name="card-panel-icon" />
                <span v-else style="background-color: transparent;color: #0a76a4">{{ i+1 }}</span>
              </div>
              <div style="margin-bottom: 5px">
                <img :src="item.shop_info.image" style="width: 100%;border-radius: 10px;" class="image" @click="toShop(item.shop_info)">
              </div>
              <div class="shop-msg-item" @click="toShop(item)">
                <span>{{ item.shop_info.title }}</span>
              </div>
              <div class="color-red shop-msg-item" style="font-size: 16px" @click="toShop(item.shop_info)">
                <span>￥{{ item.shop_info.money }}</span>
                <span class="color-gray" style="margin-left: 5px;font-size: 10px">{{ item.shop_info.sales }}人购买</span>
              </div>
              <div class="color-gray shop-msg-item" style="font-size: 12px;position: relative" @click="toShop(item.shop_info)">
                <span>来自：{{ item.platform.name }}</span>
                <span class="color-red" style="margin-left: 5px;float: right">{{ item.brand.name }}</span>
              </div>
            </el-card>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectPage',
  props: {
    rankQuery: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rankData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      showPanel: true,
      showButtonDisabled: false,
      loading: false
    }
  },
  computed: {
    showIcon() {
      this.$emit('updateStatus', this.showPanel)
      return this.showPanel
        ? { 'text': '收起', 'icon': 'el-icon-caret-right' }
        : { 'text': '展开', 'icon': 'el-icon-caret-left' }
    }
  },
  methods: {
    load() {
      this.$emit('change', this.rankQuery)
    },
    handleChange() {
      this.loading = true
      this.$emit('change', this.rankQuery)
      this.loading = false
    },
    toShop(item) {
      window.open(item.link, '_blank')
      // this.$router.push(`/shop/item/${item.id}`)
    }

  }
}
</script>
<style lang="scss" scoped>
.show-panel-btn{
  position: fixed;
  right: 10px;
  z-index: 10;
}
.rank-card{
  position: relative;
  .rank-icon{
    *{
      background-color: #909399;
      padding: 5px;
      font-size: 40px;
      border-radius: 30px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>

